{% extends "base.html" %}
{% block main %}

<meta charset="utf-8">
<!-- Fonts -->
    <link rel="stylesheet" href="/static/fonts/Quattrocento/Quattrocento.css">
    <link rel="stylesheet" href="/static/fonts/Quattrocento_Sans/Quattrocento_Sans.css">
<!-- Styles -->
    <link rel="stylesheet" href="/static/bootstrap-4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/owl-carousel/owl.carousel.css">
    <link rel="stylesheet" href="/static/owl-carousel/owl.theme.css">
    <link rel="stylesheet" href="/static/css/main.css">
    <link rel="stylesheet" href="/static/css/responsive.css">

<!-- Page title section start -->
    <div class="page-head post-head" style="background-image: url('/static/img/API-post-cover.jpg');">
        <div class="container">
            <div class="page-head__breadcrumb">
                <ol class="breadcrumb">
                    <li><a href="/Home?username={{ username }}" style="color: #1d2124">home</a></li>
                    <li class="active">API</li>
                </ol>
            </div>
            <div class="row"><div class="col-md-8">
                <h1 class="page-head__title page-head__title_full" style="color: #2b2b2b">高德步行导航</h1>
            </div>
            </div>
        </div>
    </div>
    <!-- Page title section end -->

<!-- Page content section start -->
<main class="page-content">
<div class="new-single">
    <div class="container">
        <div class="row row-extended">
            <div class="col-lg-8">
            <article class="post">
                 <div class="post__content">
                     <br>
                     <br>
                     <br>
                     <br>
                    <p>
                        高德导航相信大家都有用过，当我们不知道如何到达一个地方的时候，我们第一时间想到的总是拿出手机看导航，跟着它给我们规划好的路线，我们便可以
                        去到我们的目的地。
                    </p>
                    <p>
                        高德API功能十分强大，除了可以给我们指定路线，还可以做到周边搜索、查询天气等等功能。API的应用看起来好像很复杂，但其实只要我们弄清楚
                        其中的原理，我们也可以做出一个简单的步行导航规划的flask应用。
                    </p>
                    <p>
                        首先，高德API每一个功能的使用都需要密钥，因此在使用之前，我们需要去<a href="https://lbs.amap.com/">高德API官网</a> 申请一个密钥。
                        其次，因为高德API的使用，有它自己的一套识别地址的语言，因此第一件事，我们需要做的是将我们的文字地址转换为高德经纬度坐标。在这里，我们
                        需要使用高德API的地理编码服务。
                    </p>
                    <blockquote>
                          <img src="/static/img/API_code1.png">
                    </blockquote>
                    <p>
                        接着，就是根据<a href="https://lbs.amap.com/api/webservice/guide/api/direction">官方API文档</a>中所提供的步行路径
                        规划所必须的参数来写一个步行路径规划的函数。
                    </p>
                    <blockquote>
                          <img src="/static/img/API_code2.png">
                    </blockquote>
                    <p>
                        如果要做一个能供每一个人使用的步行路径规划的Web，我们当然不能要求我们的用户去自己转换编码。那么如何实现将用户输入的中文结构化地址自动
                        转化为高德能够识别的经纬度坐标呢。这时就需要联动我们刚刚写的两个函数，来写一个新的能在flask上运行的函数了。根据使用地理编码API获取到
                        的信息，将我们所需要的经纬度坐标提取出来，带入到新写的函数之中，那么就可以实现输入中文地址自动转化的功能了。最后，为了用户的方便，我们
                        将其变成一个表格的形式呈现给用户。
                    </p>
                    <blockquote>
                           <img src="/static/img/API_code3.png">
                    </blockquote>
                    <p>
                        最后，就是在flask里面导入这个函数，那么一个简易的高德步行规划Web就做好啦。大家可以点击文末的链接，试试WeStudy给大家做好的一个范例
                        感受一下高德API的魅力。
                    </p>
                    <blockquote>
                        <img src="/static/img/API_code4.png">
                    </blockquote>
                    <h5>
                        <a href="/geo_func?username={{ username }}">步行路径规划Web</a>
                    </h5>
                     <br>
                     <br>
                    <h4>所运用到的知识点</h4>
                    <ul>
                    <li>高德API地理编码</li>
                    <li>高德API步行路径规划</li>
                    <li>pd.josn_normalize的用法</li>
                    </ul>
                    <section class="post-tag">
                        <div class="row">
                         <div class="col-sm-6">
                            <div class="post__tags">
                              <h2 class="h4">Tags</h2>
                                <div class="tag-cloud">
                                  <a href="category-post.html">
                                     <span class="label label-default animate">API</span>
                                  </a>
            </article>
            </div>
        </div>
    </div>
</div>
</main>
{% endblock %}